<template>
<div>
    <van-sticky>
        <div class="header">
            <van-nav-bar title="消息" left-arrow>
                <van-icon name="smile-o" slot="left" style="font-size:30px;"/>
                <van-icon name="smile-o" slot="right"/>
            </van-nav-bar>
        </div>
    </van-sticky>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div style="min-height:500px;">
        <div class="dhk" v-for="a in dhk" :key="a">
            <h1 v-bind:style="{'background-image':'url('+ a.bgimg +')'}"></h1>
            <h2>
                <span class="sp1">{{ a.sp1 }}</span>
                <span class="sp2">{{ a.sp2 }}</span>
            </h2>
            <h3>{{ a.h3 }}</h3>
        </div>
        </div>
    </van-pull-refresh>
    <!-- 底部标签栏 -->
     <van-tabbar
  v-model="active"
  active-color="#07c160"
  inactive-color="#000"
  >
  <van-tabbar-item name="cf" icon="wap-home" to="/">下厨房</van-tabbar-item>
  <van-tabbar-item name="sj" icon="shop-collect" to="/shiji">市集</van-tabbar-item>
  <van-tabbar-item name="sc" icon="like" to="/shoucang">收藏</van-tabbar-item>
  <van-tabbar-item name="xj" icon="invition">信籍</van-tabbar-item>
  <van-tabbar-item name="me" icon="manager" to="/wo">我</van-tabbar-item>
</van-tabbar>
    <!-- end底部标签栏 -->
</div>
</template>
<script>
export default {
    data () {
        return {
            isLoading: false,
            dhk: '',
            active: 'xj'
        };
    },
    created: function () {
        const api = '/xj.json';
        this.axios.get(api).then((response) => {
            this.dhk = response.data.dhk;
        });
    },
    methods: {
        onRefresh () {
            setTimeout(() => {
                this.$toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 500);
        }
    }
};
</script>
<style lang="less">
.header{
    width: 100%;
    height: 44px;
    background-color: #fff;
    margin-top: 2px;
}
.test{
        width: 100%;
        height: 500px;
}
.dhk{
    width: 100%;
    height: 67px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 12px;
    h1{
        float: left;
        width: 44px;
        height: 44px;
        border-radius: 44px;
        background-size: 100% 100%
    }
    h2{
        float: left;
        width: 103px;
        height: 47px;
        margin-left: 10px;
        .sp1{
            display: block;
            width: 100%;
            height: 23px;
            font-size: 15px;
            color: rgba(51, 51, 51, 1);
            line-height: 23px;
            text-align: left;
        }
        .sp2{
            display: block;
            width: 100%;
            height: 23px;
            font-size: 15px;
            color: rgba(166, 166, 166, 1);
            line-height: 23px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    h3{
        width: 103px;
        height: 23px;
        float: right;
        text-align: right;
        color: rgba(166, 166, 166, 1);
        font-size: 13px;
    }
}
</style>
